function marathon_chart() {
    // echarts.init(document.getElementById("marathon")).dispose()
    var myChart = echarts.init(document.getElementById('marathon'));
    let option = {
        title: [
            {
                text: '全程跑945人',
                left: '20%',
                top: '0%',
                textAlign: 'center',
                textStyle: {
                    fontSize: 16,
                    color: '#ffffff',
                    fontWeight: 'bold'
                }
            },
            {
                text: '半程跑3030人',
                left: '50%',
                top: '0%',
                textAlign: 'center',
                textStyle: {
                    fontSize: 16,
                    color: '#ffffff',
                    fontWeight: 'bold'
                }
            },
            {
                text: '欢乐跑6063人',
                left: '85%',
                top: '0%',
                textAlign: 'center',
                textStyle: {
                    fontSize: 16,
                    color: '#ffffff',
                    fontWeight: 'bold'
                }
            }
        ],
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'horizontal',
            bottom: '10%',
            // itemGap:20,
            textStyle: {
                color: '#ffffff' // 设置字体颜色为白色
            },
            formatter: function (name) {
                // Find the value of the corresponding name in the data array
                const data = [
                    {value: 85, name: "克市全程跑"},
                    {value: 392, name: '疆内全程跑'},
                    {value: 468, name: '疆外全程跑'},
                    {value: 352, name: '克市半程跑'},
                    {value: 1226, name: '疆内半程跑'},
                    {value: 1452, name: '疆外半程跑'},
                    {value: 3564, name: '克市欢乐跑'},
                    {value: 1990, name: '疆内欢乐跑'},
                    {value: 509, name: '疆外欢乐跑'}
                ];
                // Find the item that matches the legend name
                const item = data.find(item => item.name === name);
                return item ? `${name}: ${item.value}人` : name;
            }
        },
        series: [
            {
                name: '全程跑',
                type: 'pie',
                radius: '40%',
                center: ['20%', '40%'],
                data: [
                    {value: 85, name: '克市全程跑'},
                    {value: 392, name: '疆内全程跑'},
                    {value: 468, name: '疆外全程跑'},
                ],

                borderColor: 'none', // 去除标签字体边框
                label: {
                    textStyle: {
                        color: '#fff'
                    },
                    formatter: function (params) {
                        const maxLength = 6;
                        const name = params.name;
                        const formattedName = name.length > maxLength ? name.slice(0, maxLength) + '\n' + name.slice(maxLength) : name;
                        return formattedName + '\n' + params.percent.toFixed(2) + '%';
                    }
                },
                labelLine: {
                    show: true,
                    length: 20,
                    length2: 10,

                }
            },
            {
                name: '半程跑',
                type: 'pie',
                radius: '40%',
                center: ['50%', '40%'],
                data: [
                    {value: 352, name: '克市半程跑'},
                    {value: 1226, name: '疆内半程跑'},
                    {value: 1452, name: '疆外半程跑'},
                ],

                borderColor: 'none', // 去除标签字体边框
                label: {
                    textStyle: {
                        color: '#fff'
                    },
                    formatter: function (params) {
                        const maxLength = 6;
                        const name = params.name;
                        const formattedName = name.length > maxLength ? name.slice(0, maxLength) + '\n' + name.slice(maxLength) : name;
                        return formattedName + '\n' + params.percent.toFixed(2) + '%';
                    }
                },
                labelLine: {
                    show: true,
                    length: 20,
                    length2: 10
                }
            },
            {
                name: '欢乐跑',
                type: 'pie',
                radius: '40%',
                center: ['85%', '40%'],

                borderColor: 'none', // 去除标签字体边框
                data: [
                    {value: 3564, name: '克市欢乐跑'},
                    {value: 1990, name: '疆内欢乐跑'},
                    {value: 509, name: '疆外欢乐跑'}
                ],
                label: {
                    textStyle: {
                        color: '#fff'
                    },
                    formatter: function (params) {
                        const maxLength = 2;
                        const name = params.name;
                        const formattedName = name.length > maxLength ? name.slice(0, maxLength) + '\n' + name.slice(maxLength) : name;
                        return formattedName + '\n' + params.percent.toFixed(2) + '%';
                    }
                },
                labelLine: {
                    show: true,
                    length: 20,
                    length2: 10
                }
            }
        ]
    };
    myChart.setOption(option);
}

export {
    marathon_chart
}